<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" class="chart-wrapper" style="margin-bottom:20px;">
        <div>
          <el-row :xs="24" :sm="24" :lg="24" class="endRight" style="padding-right:0">
            <!-- <el-col :xs="4" :sm="4" :lg="3" class="mtright">
              <el-select v-model="listQuery.country" value-key="name" placeholder="请选择国家" @change="getRemoteStateList">
                <el-option
                  v-for="item in countryListOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                />
              </el-select>
            </el-col> -->
            <!-- <el-col :xs="4" :sm="4" :lg="3" class="mtright">
              <el-select v-model="listQuery.state" value-key="name" placeholder="请选择省/州" @change="getRemoteCountyList">
                <el-option
                  v-for="item in stateListOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                />
              </el-select>
            </el-col> -->
            <!-- <el-col :xs="4" :sm="4" :lg="3" class="mtright">
              <el-select v-model="listQuery.county" value-key="name" placeholder="请选择区" @change="countySlected">
                <el-option
                  v-for="item in countyListOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                />
              </el-select>
            </el-col> -->
            <el-button
              class="filter-item"
              type="primary"
              style="margin-right:auto;"
              @click="addClick(1)"
            >新增国家</el-button>
            <el-button
              class="filter-item"
              type="primary"
              style="margin-right:auto;"
              @click="addClick(2)"
            >新增省/州/区</el-button>
            <el-button
              class="filter-item"
              type="primary"
              style="margin-right:auto;"
              @click="addClick(3)"
            >新增城市</el-button>
            <!-- <el-button
              class="filter-item"
              type="primary"
              style="margin-right:auto;"
              @click="addReportClick"
            >新增</el-button> -->
          </el-row>

        </div>

      </el-col>
  <!--新增国家-->
      <myModal :obj="objGJ" @close="close" @save="save" :disabled="disabled">
        <div class="mpdalBody">
          <el-form ref="form" :model="postForm" label-width="95px" class="formDiv">
            <el-row :gutter="32">
              <el-col :xs="12" :sm="12" :lg="12" class="">
                <el-form-item label="国家:" :span="24">
                  <el-col :xs="24" :sm="24" :lg="24" class="" style="padding-left:0">
                     <el-input v-model="postForm.name" placeholder="请输入" />
                  </el-col>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="12" class="">
                <el-form-item label="国家中文:" :span="24">
                  <el-col :xs="24" :sm="24" :lg="24" class="" style="padding-left:0">
                    <el-input v-model="postForm.nameCn" placeholder="请输入" />
                  </el-col>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="12" class="">
                <el-form-item label="币种英文简称:" :span="24">
                  <el-col :xs="24" :sm="24" :lg="24" class="" style="padding-left:0">
                    <el-input v-model="postForm.currency" placeholder="请输入" />
                  </el-col>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </myModal>
 <!--新增国家-->
  <!--新增州-->
      <myModal :obj="objZ" @close="close" @save="saveZ" :disabled="disabled">
        <div class="mpdalBody">
          <el-form ref="form" :model="postFormZ" label-width="95px" class="formDiv">
            <el-row :gutter="32">
              <el-col :xs="12" :sm="12" :lg="12" class="">
                <el-form-item label="国家:" :span="24">
                  <el-col :xs="24" :sm="24" :lg="24" class="" style="padding-left:0">
                    <el-select v-model="postFormZ.parentCode"  placeholder="请选择" @change="getRemoteStateList">
                      <el-option
                        v-for="item in countryListOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-col>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="12" class="">
                <el-form-item label="省/州/区名字:" :span="24">
                  <el-col :xs="24" :sm="24" :lg="24" class="" style="padding-left:0">
                    <el-input v-model="postFormZ.name" placeholder="请输入" />
                  </el-col>
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="12" class="">
                <el-form-item label="省/州/区中文:" :span="24">
                  <el-col :xs="24" :sm="24" :lg="24" class="" style="padding-left:0">
                    <el-input v-model="postFormZ.nameCn" placeholder="请输入" />
                  </el-col>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </myModal>
   <!--新增州-->







<!--新增城市-->
      <myModal :obj="obj" @close="close" @save="saveCS" :disabled="disabled" >
        <div class="mpdalBody">
          <el-form ref="form" :model="postFormCS" label-width="65px" class="formDiv">
            <el-row :gutter="32">
              <el-col :xs="12" :sm="12" :lg="12" class="">
                <el-form-item label="国家:" :span="20">
                  <el-col :xs="20" :sm="20" :lg="20" class="" style="padding-left:0">
                    <el-select v-model="newGJ" value-key="name" placeholder="请选择" @change="getRemoteStateList">
                      <el-option
                        v-for="item in countryListOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-col>
                  <!-- <el-col :xs="4" :sm="4" :lg="4" class="" style="padding-left:0;padding-right:0">
                    <span class="span1">编辑</span>
                  </el-col> -->
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="12" class="">
                <el-form-item label="省/州/区:" :span="20">
                  <el-col :xs="20" :sm="20" :lg="20" class="" style="padding-left:0;">
                    <el-select v-model="postFormCS.parentCode" value-key="name" placeholder="请选择" @change="getRemoteCountyList">
                      <el-option
                        v-for="item in stateListOptions"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-col>
                  <!-- <el-col :xs="4" :sm="4" :lg="4" class="" style="padding-left:0;padding-right:0">
                    <span class="span1">编辑</span>
                  </el-col> -->
                </el-form-item>
              </el-col>
              <el-col :xs="12" :sm="12" :lg="12" class="">

                <el-form-item label="城市名字:" :span="20">
                  <el-col :xs="20" :sm="20" :lg="20" class="" style="padding-left:0">
                   <el-input v-model="postFormCS.name" placeholder="请输入" />
                  </el-col>
                </el-form-item>
              </el-col>

              <el-col :xs="12" :sm="12" :lg="12" class="">
                <el-form-item label="城市中文:" :span="20">
                  <el-col :xs="20" :sm="20" :lg="20" class="" style="padding-left:0">
                    <el-input v-model="postFormCS.nameCn" placeholder="请输入" />
                  </el-col>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </myModal>
      <!--新增城市-->

      <!-- <el-table
        :data="tableData"
        style="width: 100%"
         
        class="card-table"
        :border="false"
        stripe
        :default-sort="{prop: 'five'}"
      >
        <el-table-column
          show-overflow-tooltip
          prop="ID"
          label="ID"
          min-width="50%"
          align="center"
        >
          <template slot-scope="scope">
            <router-link :to="{path: '', query:{}}" class="linkBtn">
              {{ scope.row.saleNo }}
            </router-link>
          </template>
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="status"
          label="货币"
          min-width="50%"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
          prop="deliveryDate"
          label="汇率"
          min-width="50%"
          align="center"
        />
        <el-table-column
          show-overflow-tooltip
           
          label="操作"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              class="linkBtn"
              @click="handleClick(scope.row, 1)"
            >编辑</el-button>
            <el-button
              type="text"
              size="small"
              @click="handleClick(scope.row, 2)"
            >删除</el-button>
          </template>
        </el-table-column>

      </el-table> -->
        <div id="example">
        <zk-table
          ref="table"
          index-text="序号"
          :data="data"
          :columns="columns"
          :stripe="props.stripe"
          :border="props.border"
          :show-header="props.showHeader"
          :show-summary="props.showSummary"
          :show-row-hover="props.showRowHover"
          :show-index="props.showIndex"
          :tree-type="props.treeType"
          :is-fold="props.isFold"
          :expand-type="props.expandType"
          :selection-type="props.selectionType">
        
          <template slot="likes" scope="scope">
            <el-button
              type="text"
              size="small"
              class="linkBtn"
              @click="edit(scope.row, 1)"
            >编辑</el-button>
            <el-button
              type="text"
              size="small"
              class="linkBtn"
              @click="del(scope.row, 1)"
            >删除</el-button>
            <!-- <span class="bj btnEnd" @click="edit(scope.row)">编辑</span>
            <span class="del btnEnd"  @click="del(scope.row)">删除</span> -->
          </template>
        </zk-table>
        </div>
    </el-row>

        <!---->
    <myModal :obj="deleteobj" @close="close" @save="deleteHouse">
      <div class="mpdalBody" style="text-align:center">
        <span>确定要删除吗？</span>
      </div>
    </myModal>
    <!---->
    <!---->
  </div>
</template>

<script>
import { saveaddress, getRateList ,delDz,updateDZ,getDetail} from '@/api/houseView'
import { houseTypeFormat2, houseStatusFormat2, measureTypeFormat2 } from '@/utils/common'
import myModal from '@/components/Modal'
import { list ,getztree} from '@/api/area'
export default {
  components: {
    myModal
  },
  data() {
    return {
      newGJ:'',
      innerVisible:false,
      disabled:true,
       props: {
        stripe: false, // 是否显示间隔斑马纹
        border: true, // 是否显示纵向边框
        showHeader: true, // 是否显示表头
        showSummary: false, // 是否显示表尾合计行
        showRowHover: true, // 鼠标悬停时，是否高亮当前行
        showIndex: true, // 是否显示数据索引
        treeType: true, // 是否为树形表格
        isFold: true, // 树形表格中父级是否默认折叠
        expandType: false, // 是否为展开行类型表格（为 True 时，需要添加名称为 '$expand' 的作用域插槽, 它可以获取到 row, rowIndex)
        selectionType: false, // 是否为多选类型表格
        },
         data: [],    //数据
      value: '',
      deleteobj: {
        show: false,
        title: '删除',
        width: '447px'
      },
      obj: {
        show: false,
        title: '新增城市',
        width: '647px'
      },
      objGJ: {
        show: false,
        title: '新增国家',
        width: '647px'
      },
      objZ: {
        show: false,
        title: '新增省/州/区',
        width: '647px'
      },
      postForm: {

      },
      postFormZ:{},
      postFormCS:{
        parentCode:null
      },
      countryListOptions: [],
      tableData: [],
      listQuery: {
        page: 1,
        limit: 10,
        type: null,
        orderStatus: null,
        payType: null,
        buyer: null,
        goodsId: null,
        organizationId: null
      },
      stateListOptions: [],
      countyListOptions: [],
      columns: [
        {
        label: '名字', // 列标题名称
        prop: 'name', // 对应列内容的属性名
        width: '400px', // 列宽度
        },
        {
        label: '中文名',
        prop: 'nameCn',
        minWidth: '250px',
        },
        // {
        // label: 'ID',
        // prop: 'id',
        // },
        {
        label: '货币',
        prop: 'currency',
        minWidth: '200px',
        },
        {
        label: '操作',
        prop: 'likes',
        minWidth: '200px',
        type: 'template',
        template: "likes", // 列类型为 'template'(自定义列模板) 时，对应的作用域插槽（它可以获取到 row, rowIndex, column, columnIndex）名称
        },
        ],
        showInput:0,
        delID:''
    }
  },
  mounted() {
    this.init()
  },
  watch:{
    postForm:{
      handler(val){
        if(val.name && val.currency  && val.nameCn){
          this.disabled = false
        }else{
          this.disabled = true
        }
      },
      deep:true
    },
    postFormZ:{
      handler(val){
        if(val.parentCode && val.name  && val.nameCn){
          this.disabled = false
        }else{
          this.disabled = true
        }
      },
      deep:true
    },
    postFormCS:{
      handler(val){
        if(val.parentCode && val.name  && val.nameCn ){
          this.disabled = false
        }else{
          this.disabled = true
        }
      },
      deep:true
    },
    stateListOptions(){
     // this.postFormCS.parentCode = this.stateListOptions[0].code
    }
  },
  methods: {
    edit(row){
      if(row._level == 1){
          this.objGJ.title = "编辑国家"
           let obj = Object.assign({},row)
          this.postForm = obj
          // this.postForm.currency =obj.currency
          // this.postForm.name = obj.name
          // this.postForm.nameCn = obj.nameCn
          // this.postForm.parentCode = 0
          this.objGJ.show = true
          return
      }
      if(row._level == 2){
          this.objZ.title = "编辑省/州/区"
          let obj = Object.assign({},row)
          this.postFormZ = obj
          this.objZ.show = true
          return
      }
      if(row._level == 3){
          getDetail(row.id).then(async (response) => {
          // if(response.code == 200){
          //   this.deleteobj.show = false
          //   this.init()
          // }
                // list(data.id).then(response => {
                //   if (!response.data) return
                //   this.stateListOptions = response.data
                // })

            this.obj.title = "编辑城市"
            let obj = Object.assign({},row)
            this.postFormCS = obj
            this.newGJ = response.data.countryCode
            this.postFormCS.parentCode = response.data.stateCode
            await this.getRemoteStateList({id:this.newGJ})
            this.obj.show = true
        })
        return
      }
    },
    del(row){
      this.delID = row.id
      this.deleteobj.show= true
      console.log(row)
    },
    addClick(val){
        this.showInput = val
        this.stateListOptions = []
        if(val == 1){
          this.postForm.parentCode = 0
          this.objGJ.show = true
          this.objGJ.title = "新增国家"
          return
        }
        if(val == 2){
          this.objZ.title = "新增省/州/区"
          this.objZ.show = true
          return
        }
        if(val == 3){
          this.obj.title = "新增城市"
          this.obj.show = true
          return
        }
    },
    tocloseeAddress(){

    },
    deleteHouse(){
      delDz(this.delID).then(response => {
        if(response.code == 200){
          this.deleteobj.show = false
          this.init()
        }
      })
    },
    getRemoteStateList(data) {
      console.log(data)
     
      console.log(typeof  data)
      if(typeof data == "string"){
          data = {id:data}
           this.postFormCS.parentCode = null
      }
   //   this.postForm.country = data.name
      list(data.id).then(response => {
        if (!response.data) return
        this.stateListOptions = response.data
      })
    },
    getRemoteCountyList(data) {
      console.log(data)
      this.postForm.state = data.name
      list(data.code).then(response => {
        if (!response.data) return
        this.countyListOptions = response.data
      })
    },
    handleClick() {

    },
    init() {
      list('0').then(response => {
        if (!response.data) return
        this.countryListOptions = response.data
        if (!this.isEdit && this.postForm.country === '') {
          // this.postForm.organizationId = response.data[0].id
        }
      })
      getRateList(this.listQuery).then(response => {
       // console.log(response, 999)
      })
      getztree().then(response => {
        this.data = response.data
      })
    },
    addReportClick() {
      this.obj.show = true
    },
    close(val) {
      this.postForm = {}
      this.postFormZ = {}
      // this.postFormCS = {}
      this.postFormCS.parentCode = ''
      this.postFormCS.nameCn = ''
      this.postFormCS.name = ''
      this.obj.show = false
      this.objGJ.show = false
      this.objZ.show= false
      this.deleteobj.show= false
      this.newGJ = ''
    },
    save() {
      const that = this
    //  this.postForm.country = that.value
      if(this.postForm.id != undefined){   
        updateDZ(this.postForm).then(response => {
          if(response.code == 200){
            this.$notify.success({ message: '更新成功' })
            this.init()
            this.postForm = {}
            this.close()
          }
        })
        return
      }
      saveaddress(this.postForm).then(response => {
        if(response.code == 200){
        this.$notify.success({ message: '保存成功' })
        this.init()
        this.postForm = {}
        this.close()
        }
      })
      that.close()
    },
    saveZ() {
      const that = this
          if(this.postFormZ.id != undefined){   
        updateDZ(this.postFormZ).then(response => {
          if(response.code == 200){
            this.$notify.success({ message: '更新成功' })
            this.init()
            this.postFormZ = {}
            this.close()
          }
        })
        return
      }
      saveaddress(this.postFormZ).then(response => {
        if(response.code == 200){
        this.$notify.success({ message: '保存成功' })
        this.init()
        this.postFormZ = {}
        this.close()
        }
      })
      that.close()
    },
    saveCS() {
      const that = this
      if(this.postFormCS.id != undefined){   
        this.postFormCS.countryCode = this.newGJ
        updateDZ(this.postFormCS).then(response => {
          if(response.code == 200){
            this.$notify.success({ message: '更新成功' })
            this.init()
            // this.postFormCS = {}
                  this.postFormCS.parentCode = ''
                  this.postFormCS.nameCn = ''
                  this.postFormCS.name = ''
            this.close()
          }
        })
        return
      }
      saveaddress(this.postFormCS).then(response => {
        if(response.code == 200){
        this.$notify.success({ message: '保存成功' })
        this.init()
        // this.postFormCS = {}
              this.postFormCS.parentCode = ''
              this.postFormCS.nameCn = ''
              this.postFormCS.name = ''
        this.newGJ = ''
        this.close()
        }
      })
      that.close()
    },
    countySlected(){

    }
  }
}
</script>

<style lang="scss" scoped>
.chart-wrapper{text-align: right;}
.mpdalBody{overflow: hidden;}
::v-deep .el-table th.is-leaf,
::v-deep .el-table td,
::v-deep .el-table__body {
  border: 0;
}
::v-deep .el-table::before,
::v-deep .el-table__fixed-right::before {
  display: none;
}
::v-deep th {
  background: #f7f7f7;
  font-weight: normal;
  color: #101010;
}
.mtright{margin-right: 11px;}
 .switch-list {
 margin: 20px 0;
 list-style: none;
 overflow: hidden;
 }
 .switch-item {
 margin: 20px;
 float: left;
 }
.overview-content{padding: 0px;}
.span1{border: 1px solid rgba(236, 236, 236, 100);background: #F9F8F8; width: 45px;color: #868686;font-size: 14px;display: block; height: 33px;line-height: 33px;border-radius: 1px;text-align: center;}
.btnEnd{color: #5794ff;margin-right: 10px;cursor: pointer;}
</style>

